<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
		</style>
	</head>
	<body>
		<div id="box">
			<div id="box2" class="box3" style="border: 1px solid red;" kky="2001A" >
				这是box2
			</div>
			<div>
				<img src="KkyLogo4.png" alt="kky" id="img" />
			</div>
			<div id="btns">
				<button type="button" onclick="fn1()">获取box2的属性</button><br /><br />
				<button type="button" onclick="fn2()">获取img的属性</button><br /><br />
			</div>
		</div>
		<script>
			/*
			3.设置或获取HTML属性
				obj.attr="新属性值";
				attr指属性名,如src;class;id;name,value,type,href,rel,type,alt,width,heigth等
				
				obj.attributes	返回一个元素的属性数组
				obj.hasAttribute()	如果元素中存在指定的属性返回 true，否则返回false。
				obj.hasAttributes()	如果元素有任何属性返回true，否则返回false。
				
				obj.getAttribute();//属性
				obj.removeAttribute();//删除属性
				obj.setAttribute();//设置/增加/修改 属性
			*/
		   
		   function fn1(){
			   var box2=document.getElementById("box2");
			   console.log(box2);
			   console.dir(box2);//将对象所有的属性和方法都打印出来
			   //获取
			   var attrs=box2.attributes;//返回一个元素的(所有)属性数组
			   console.log("attrs:",attrs);//
			   
			   var fId=box2.hasAttribute("id");//如果元素中存在指定的属性返回 true，否则返回false。
			   console.log("fId:",fId);
			   
			   var fAttr=box2.hasAttributes();//如果元素有任何属性返回true，否则返回false。
			   console.log("fAttr",fAttr);
			   console.log("///////////////////////////////////");
			   
			   //获取属性
			   var id=box2.getAttribute("id");
			   console.log("id:",id);
			   var id2=box2.id;
			   console.log("id2:",id2);
			   //比如class特殊的属性,不可以使用对象.属性名获取需要通过getAttribute获取
			   var class1=box2.className;//通过className获取该对象的class名称
			   console.log("class1:",class1);
			   var class2=box2.class;//不可以用
			   console.log("class2:",class2);
			   var class3=box2.getAttribute("class");
			   console.log("class3:",class3);
			   
			   var kky=box2.getAttribute("kky");
			   console.log("kky:",kky);
			   
			   //设置属性
			   box2.setAttribute("kky2020","这是kky2020的属性");
			   
			   //删除属性
			   box2.removeAttribute("kky");
			   
		   }
		</script>
	</body>
</html>
